<template>
  <t-collapse borderless="true" @change="handlePanelChange">
    <t-collapse-panel value="0" header="动画">
      <t-form label-align="left">
        <t-form-item label="动画效果" name="lineAnimateType">
          <template v-if="pen.name === 'line'">
            <t-select v-model="pen.lineAnimateType" @change="changeValue('lineAnimateType')">
              <t-option :key="0" :value="0" label="水流"></t-option>
              <t-option :key="1" :value="1" label="水珠流动"></t-option>
              <t-option :key="2" :value="2" label="圆点"></t-option>
              <t-option :key="3" :value="3" label="箭头"></t-option>
              <t-option :key="4" :value="4" label="水滴"></t-option>
            </t-select>
          </template>
          <template v-else>
            <t-select
              v-model="pen.animateType"
              :options="animateTypeOption.map(option => ({
                label: option.name,
                value: option.key
              }))"
              @change="changeAnimate"
            >
            </t-select>
          </template>
        </t-form-item>
        <t-form-item v-if="pen.name === 'line'" label="动画线条" name="animateLineDash">
          <t-select v-model="pen.animateLineDash" valueDisplay="trigger" @change="changeValue('animateLineDash')">
          <template #valueDisplay="{ value }">
            <svg style="height: 20px; width: 110px;">
              <g fill="none" stroke="black" stroke-width="1">
                <path :stroke-dasharray="loadActiveLineFun(value)" d="M0 9 l85 0"></path>
              </g>
            </svg>
          </template>
          <t-option v-for="(item, index) in lineDashs" :key="index" :value="index">
            <svg style="height: 20px;width: 130px;">
              <g fill="none" stroke="black" stroke-width="1">
                <path :stroke-dasharray="item.join(' ')" d="M0 9 l85 0"></path>
              </g>
            </svg>
          </t-option>
        </t-select>
        </t-form-item>
        <t-form-item label="动画线宽" name="animateLineWidth">
          <t-input-number
            :min="0"
            :step="1"
            theme="column"
            style="width: 100%;"
            v-model="pen.animateLineWidth"
            @change="changeValue('animateLineWidth')"
          />
        </t-form-item>
        <t-form-item label="动画颜色" name="animateColor">
          <t-color-picker
            class="w-full"
            v-model="pen.animateColor"
            :enableAlpha="true"
            :show-primary-color-preview="false"
            format="CSS"
            :color-modes="['monochrome']"
            @change="changeValue('animateColor')"
          />
        </t-form-item>
        <t-form-item label="动画发光" name="animateShadow">
          <t-switch v-model="pen.animateShadow" size="medium" @change="changeValue('animateShadow')"></t-switch>
        </t-form-item>
        <t-form-item label="动画发光颜色" name="animateShadowColor" v-show="pen.animateShadow">
          <t-color-picker
            class="w-full"
            v-model="pen.animateShadowColor"
            :enableAlpha="true"
            :show-primary-color-preview="false"
            format="CSS"
            :color-modes="['monochrome']"
            @change="changeValue('animateShadowColor')"
          />
        </t-form-item>
        <t-form-item label="动画发光模糊" name="animateShadowBlur" v-show="pen.animateShadow">
          <t-input-number
            :min="0"
            :step="1"
            theme="column"
            style="width: 100%;"
            v-model="pen.animateShadowBlur"
            @change="changeValue('animateShadowBlur')"
          />
        </t-form-item>
        <t-form-item label="动画速度" name="animateSpan">
          <t-slider v-model="pen.animateSpan" @change="changeValue('animateSpan')" />
        </t-form-item>
        <t-form-item label="反向流动" name="animateReverse">
          <t-switch v-model="pen.animateReverse" size="medium" @change="changeValue('animateReverse')"></t-switch>
        </t-form-item>
        <t-form-item label="循环次数" name="animateCycle">
          <t-input-number
            :min="0"
            :step="1"
            theme="column"
            style="width: 100%;"
            v-model="pen.animateCycle"
            @change="changeValue('animateCycle')"
          />
        </t-form-item>  
        <!-- <t-form-item label="下个动画" name="nextAnimate">
          <t-input v-model="pen.nextAnimate" @change="changeValue('nextAnimate')" placeholder="多个topic以英文逗号“,”分隔" />
        </t-form-item> -->
        <t-form-item label="自动播放" name="autoPlay">
          <t-switch v-model="pen.autoPlay" size="medium" @change="changeValue('autoPlay')"></t-switch>
        </t-form-item>
        <t-form-item label="保持动画状态" name="keepAnimateState">
          <t-switch v-model="pen.keepAnimateState" size="medium" @change="changeValue('keepAnimateState')"></t-switch>
        </t-form-item>
        <t-form-item label="线性播放" name="linear">
          <t-select v-model="pen.linear" @change="changeValue('linear')">
            <t-option :key="0" :value="true" label="是"></t-option>
            <t-option :key="1" :value="false" label="否"></t-option>
          </t-select>
        </t-form-item>
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <t-button theme="primary" @click="handleClickStartAnimate">
            <template #icon>
              <CaretRightOutlined />
            </template>
            播放
          </t-button>
          <t-button variant="dashed" @click="handleClickPauseAnimate">
            <template #icon>
              <PauseOutlined />
            </template>
            暂停
          </t-button>
          <t-button variant="outline" theme="danger" @click="handleClickStopAnimate">
            <template #icon>
              <CloseOutlined />
            </template>
            停止
          </t-button>
        </div>
      </t-form>
    </t-collapse-panel>
    <t-collapse-panel value="1" header="鼠标提示">
      <template #default
      >这部分是每个折叠面板折叠或展开的内容，可根据不同业务或用户的使用诉求，进行自定义填充。可以是纯文本、图文、子列表等内容形式。</template
      >
    </t-collapse-panel>
  </t-collapse>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from 'vue';
import {
  CaretRightOutlined,
  PauseOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import { useSelection } from '@/services/selections';
import { animateTypeOption } from '@/utils/operationGroups';
// import { animateTypeOption } from "@/utils/dataAtRest";



const { selections } = useSelection();
const pen = ref<any>();
// 位置数据。当前版本位置需要动态计算获取
const rect = ref<any>();
const lineDashs = [[5, 5], [10, 10], [10, 10, 2, 10]];


onMounted(() => {
  console.log('onMounted___')
  getPen();
});

const handlePanelChange = (val: any) => {
  console.log(val);
};

// const getPen = () => {
//   pen.value = selections.pen![0];
//   if (pen.value.globalAlpha == undefined) {
//     pen.value.globalAlpha = 1;
//   }
//   rect.value = meta2d.getPenRect(pen.value);
// };
const getPen = () => {
  pen.value = selections.pen;
  if (!pen.value["globalAlpha"]) {
    pen.value["globalAlpha"] = 1;
  }
  console.log('pen.value', pen.value)
  rect.value = meta2d.getPenRect(pen.value);
};

const loadActiveLineFun = (value: number) => {
  const _activeLine = lineDashs.find((_d, index) => index === value);
  return _activeLine?.join(' ')
}

// 监听选中不同图元
// @ts-ignore
const watcher = watch(() => {
  if (selections.pen) {
    selections.pen.id;
  }
}, getPen);

watch(
  () => selections.pen,
  (newVal: any) => {
    if (newVal) {
      getPen();
    }
  },
  { immediate: true }
);

// const lineDashs = [undefined, [5, 5]];

const changeValue = (prop: string) => {
  const v: any = { id: pen.value.id };
  v[prop] = pen.value[prop];
  console.log('v[prop]', v[prop])
  if (prop === 'animateLineDash') {
    v.lineDash = lineDashs[v[prop]];
  }
  meta2d.setValue(v, { render: true });
};

// const changeRect = (prop: string) => {
//   const v: any = { id: pen.value.id };
//   v[prop] = rect.value[prop];
//   meta2d.setValue(v, { render: true });
// };

const changeAnimate = (val: any) => {
  console.log('val', val)
  const data = animateTypeOption.find((_) => _.key == val);
  if (data) {
    let { frames } = data;
    if (frames.length !== 0) {
      Object.assign(pen.value, {
        frames,
        duration: frames[0].duration,
      });
    }
    Object.keys(pen.value).map((_) => {
      if (["animateType", "frames"].includes(_)) {
        changeValue(_);
      }
    });
  }
}

const handleClickStartAnimate = () => {
  meta2d.startAnimate(pen.value.id);
}
const handleClickPauseAnimate = () => {
  meta2d.pauseAnimate(pen.value.id);
}
const handleClickStopAnimate = () => {
  meta2d.stopAnimate(pen.value.id);
}

onUnmounted(() => {
  watcher();
});
</script>
<style lang="scss" scoped>
  :deep(.t-form) {
    .t-form__item {
      margin-bottom: 8px;
    }
    .t-form__label {
      padding-right: 8px;
      label {
        font-size: 12px;
        font-weight: 400;
        color: #7f838c;
        line-height: 18px;
        letter-spacing: 0px;
      }
    }

    .t-divider {
      margin: 12px 0;
    }

    .t-input--auto-width {
      width: 100%;
    }
  }
  :deep(.t-collapse-panel__wrapper) {
    border-bottom: solid 1px var(--td-component-border);
    .t-collapse-panel__content {
      padding: 8px 12px;
    }
  }
</style>